<template>
	<common-page>
		<view class="page-title margin-top-32 font-28" style="color: #1E2531;font-weight: bold;">选择工作模式</view>
		<image src="../../static/install_bg.jpg" mode="" style="width: 100%;height: 332rpx;margin-top: 28rpx;"></image>
		<view class="page-content-box">
			<view class="title font-30" style="color: #4B4D5E;font-weight: bold;">安装说明</view>
			<view class="txt font-24" style="color: #9FA2B4;margin-top: 4rpx;">
				选择“跌倒监测”模式，设备将对范围内的人员实时监测跌倒状况；选择“睡眠监测”模式，设备对范围内的人员实时监测睡眠、睡姿、呼吸暂停等状况；
			</view>
		</view>
		<u-subsection
			:list="list" mode="button" :current="currentIndex"
			activeColor="#fff" inactiveColor="#333333"
			fontSize="30rpx"
			keyName="label"
			@change="bindSectionChange"
		></u-subsection>
		<view class="page-btn-wrap">
			<view class="btn-prev">
				<u-button type="primary" plain text="上一步" color="#417CE9" @click="bindGoToBack"></u-button>
			</view>
			<view class="btn-next">
				<u-button type="primary" text="继续" color="#417CE9" @click="bindGoToNext"></u-button>
			</view>
		</view>
	</common-page>
</template>

<script>
export default {
	data() {
		return {
			list: [{
				label: '跌倒监测'
			}, {
				label: '睡眠监测'
			}],
			currentIndex: 0
		};
	},
	methods: {
		// 选择工作模式
		bindSectionChange(ev) {
			this.currentIndex = ev;
		},
		// 返回
		bindGoToBack() {
			uni.navigateBack();
		},
		// 下一步
		async bindGoToNext() {
			if (this.currentIndex) { // 睡眠
				this.$store.commit('addDevice/SET_DEVICE_PARAMAS', {
					key: 'fallCheck',
					value: false
				});
				this.$store.commit('addDevice/SET_DEVICE_PARAMAS', {
					key: 'sleepMonitoring',
					value: true
				});
			} else { // 跌倒
				this.$store.commit('addDevice/SET_DEVICE_PARAMAS', {
					key: 'fallCheck',
					value: true
				});
				this.$store.commit('addDevice/SET_DEVICE_PARAMAS', {
					key: 'sleepMonitoring',
					value: false
				});
			}
			const params = this.$store.state.addDevice;
			const [err, result] = await this.$to(uni.$u.http.post('/jeecg-boot/api/v1-public/mini-program-device/addDeviceInfo', params));
			if (err) return;
			uni.$u.toast('添加设备成功');
			setTimeout(() => {
				this.$store.commit('addDevice/CLEAR_DEVICE_PARAMAS');
				console.log(this.$store.state.addDevice);
				uni.switchTab({
					url: '/pages/device/index'
				});
			}, 2000);
		}
	}
};
</script>

<style lang="scss" scoped>
.page-content-box {
	padding: 27rpx 22rpx;
	background-color: #fff;
	border-radius: 16rpx;
	margin-top: 28rpx;
}
::v-deep .u-subsection {
	height: 66rpx !important;
	border-radius: 66rpx !important;
	padding: 0 !important;
	margin-top: 24rpx !important;
	.u-subsection__bar {
		border-radius: 66rpx !important;
		background-color: #417CE9;
		height: 66rpx !important;
	}
}
.page-btn-wrap {
	position: fixed;
	bottom: 80rpx;
	left: 32rpx;
	right: 32rpx;
	display: flex;
}
.btn-prev {
	flex: 1;
	::v-deep .u-button {
		border-radius: 60rpx !important;
		background-color: unset;
	}
	.u-button__text {
		font-size: 32rpx !important;
		font-weight: bold;
	}
}
.btn-next {
	flex: 1;
	margin-left: 60rpx;
	::v-deep .u-button {
		border-radius: 60rpx !important;
		&.u-button--disabled {
			background-color: #D7D7D7 !important;
			border-color: #D7D7D7 !important;
		}
		.u-button__text {
			font-size: 32rpx !important;
			font-weight: bold;
		}
	}
}
</style>
